<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Urban Legends Archive</title>
    <style>
        /* Base Styles */
        body {
            font-family: 'Courier New', monospace;
            background-color: #0a0a0a;
            color: #e0e0e0;
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }
        
        a {
            color: #c62828;
            text-decoration: none;
        }
        
        a:hover {
            color: #ff5f52;
            text-decoration: underline;
        }
        
        /* Header */
        header {
            background-color: #121212;
            padding: 1rem;
            border-bottom: 1px solid #c62828;
            text-align: center;
        }
        
        h1 {
            color: #c62828;
            margin: 0;
            font-size: 2.5rem;
            letter-spacing: 2px;
        }
        
        .tagline {
            color: #757575;
            font-style: italic;
            margin-top: 0.5rem;
        }
        
        /* Navigation */
        nav {
            background-color: #121212;
            padding: 0.5rem;
            text-align: center;
            border-bottom: 1px solid #333;
        }
        
        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        nav li {
            display: inline-block;
            margin: 0 1rem;
        }
        
        /* Main Content */
        .container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 0 1rem;
        }
        
        .post {
            background-color: #121212;
            border-left: 3px solid #c62828;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
        
        .post-title {
            color: #c62828;
            margin-top: 0;
        }
        
        .post-meta {
            color: #757575;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }
        
        /* Sidebar */
        .sidebar {
            background-color: #121212;
            padding: 1.5rem;
            border-left: 3px solid #333;
        }
        
        .sidebar-title {
            color: #c62828;
            border-bottom: 1px solid #333;
            padding-bottom: 0.5rem;
        }
        
        /* Footer */
        footer {
            background-color: #121212;
            padding: 1rem;
            text-align: center;
            border-top: 1px solid #333;
            font-size: 0.9rem;
            color: #757575;
        }
        
        /* Responsive */
        @media (min-width: 768px) {
            .content-wrapper {
                display: flex;
            }
            
            main {
                flex: 2;
                padding-right: 2rem;
            }
            
            .sidebar {
                flex: 1;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>Urban Legends Archive</h1>
        <p class="tagline">Documenting the unexplained and the terrifying</p>
    </header>
    
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Classic Legends</a></li>
            <li><a href="#">Modern Creepypasta</a></li>
            <li><a href="#">Submitted Stories</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
    
    <div class="container content-wrapper">
        <main>
            <article class="post">
                <h2 class="post-title">The Vanishing Hitchhiker</h2>
                <div class="post-meta">Posted on October 15, 2023 | Category: Classic Legends</div>
                <p>The story of the vanishing hitchhiker is one of the most enduring urban legends, with variations appearing in nearly every culture. Typically, a driver picks up a hitchhiker who then mysteriously disappears from the moving vehicle...</p>
                <a href="#">Read more →</a>
            </article>
            
            <article class="post">
                <h2 class="post-title">Smile Dog</h2>
                <div class="post-meta">Posted on October 10, 2023 | Category: Creepypasta</div>
                <p>In the dark corners of the internet, few images are as feared as "Smile Dog." According to the legend, viewing this photograph of a grotesquely smiling canine causes nightmares, madness, and eventually death...</p>
                <a href="#">Read more →</a>
            </article>
            
            <article class="post">
                <h2 class="post-title">The Black-Eyed Children</h2>
                <div class="post-meta">Posted on October 5, 2023 | Category: Modern Legends</div>
                <p>Reports of black-eyed children date back to the late 1990s. These pale, strange children with completely black eyes approach homes or cars, asking to be let in. Those who encounter them report overwhelming feelings of dread...</p>
                <a href="#">Read more →</a>
            </article>
        </main>
        
        <aside class="sidebar">
            <h3 class="sidebar-title">Categories</h3>
            <ul>
                <li><a href="#">Classic Legends</a></li>
                <li><a href="#">Modern Creepypasta</a></li>
                <li><a href="#">Local Stories</a></li>
                <li><a href="#">Paranormal Encounters</a></li>
                <li><a href="#">Debunked Legends</a></li>
            </ul>
            
            <h3 class="sidebar-title">Most Popular</h3>
            <ul>
                <li><a href="#">The Hookman</a></li>
                <li><a href="#">Slender Man</a></li>
                <li><a href="#">Bloody Mary</a></li>
                <li><a href="#">The Babysitter Calls</a></li>
            </ul>
            
            <h3 class="sidebar-title">About</h3>
            <p>This archive collects and documents urban legends and creepy pasta from around the world. Submit your own stories or encounters.</p>
        </aside>
    </div>
    
    <footer>
        <p>© 2023 Urban Legends Archive. All stories are works of fiction unless otherwise noted.</p>
        <p><a href="#">Privacy Policy</a> | <a href="#">Contact</a></p>
    </footer>
</body>
</html>